<template>
  <div class="login">
    <a-form
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="right"
      ref="formRef"
    >
      <a-form-item
        label=""
        :wrapper-col="{ span: 24, offset: 0 }"
        style="height: 30px;"
      >
        <p style="text-align: center;font-size: 20px;">登 录</p>
      </a-form-item>
      <a-form-item label="用户名">
        <a-input v-model:value="formState.username">
          <template #prefix
            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-model:value="formState.password">
          <template #prefix
            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input-password>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: labelCol.span }">
        <a-checkbox-group v-model:value="rememberpwd">
          <a-checkbox :value="true">记住密码</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: labelCol.span }">
        <a-button type="primary" @click="onSubmit">登陆</a-button>
        <a-button style="margin-left: 10px" @click="rest">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { toRefs, reactive, onMounted } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useForm } from "@ant-design-vue/use";
import { useRouter } from "vue-router";
import { setCookie, delCookie, getCookie } from "@/utils/index.js";
export default {
  components: { UserOutlined, LockOutlined },
  setup() {
    let data = reactive({
      formState: {
        username: "",
        password: ""
      },
      rememberpwd: []
    });
    let { resetFields } = useForm(data.formState, "");
    let router = useRouter();
    let methods = {
      onSubmit() {
        if (data.formState.username == "") {
          message.info("请输入账号");
        } else if (data.formState.password == "") {
          message.info("请输入密码");
        } else {
          message.success("登陆成功");
          if (data.rememberpwd.length) {
            //保存帐号到cookie，有效期7天
            setCookie("user", data.formState.username, 7);
            //保存密码到cookie，有效期7天
            setCookie("pwd", data.formState.password, 7);
          } else {
            delCookie("user");
            delCookie("pwd");
          }
          //如果请求成功就让他2秒跳转路由
          setTimeout(() => {
            // 缓存token
            localStorage.setItem("logintoken", "true");
            // 缓存用户个人信息
            localStorage.setItem("userInfo", "true");
            router.push("/");
          }, 1000);
        }
      },
      rest() {
        resetFields();
      }
    };
    onMounted(() => {
      // 获取账号密码
      if (getCookie("user") != "" && getCookie("pwd") != "") {
        data.formState.username = getCookie("user");
        data.formState.password = getCookie("pwd");
        data.rememberpwd = [true];
      }
    });
    return {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 15
      },
      ...toRefs(data),
      ...methods,
      resetFields
    };
  }
};
</script>
<style lang="scss" scoped>
.login {
  &::after {
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: fixed;
    z-index: -999;
    background: url(../assets/back.gif) center/cover no-repeat;
  }
  .right {
    position: fixed;
    width: 300px;
    padding-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #cccccc;
    animation: right 1s;
    transition: all 0.3s;
    animation-timing-function: cubic-bezier(1, 1, 0.5, 0.1);
    animation-fill-mode: both;
  }
  @keyframes right {
    0% {
      right: 80%;
      top: 0;
    }
    80% {
      top: 15%;
      right: 17%;
    }
    90% {
      top: 15%;
      right: 13%;
    }
    100% {
      top: 15%;
      right: 15%;
    }
  }
  .right:hover {
    box-shadow: 0px 0px 10px #1890ff;
  }
}
</style>
